<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
    <title>JavaScript: Design Patterns</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="Copyright &#169; 2005-2010 W3C (MIT, ERCIM, Keio)"/>
    <meta name="duration" content="5"/>
    <meta name="font-size-adjustment" content="-2"/>

    <link rel="stylesheet" href="styles/slidy.css" type="text/css"/>
    <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css"/>
    <script type="text/javascript" src="scripts/slidy.js" charset="utf-8">//</script>

    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/presentation.css"/>
    <script type="text/javascript" src="scripts/presentation.js"></script>
</head>


<body style="">
<div class="background">
    <img alt="" id="head-icon" src="graphics/icon-blue.png"/>
</div>

<div class="background slanty">
</div>

<div class="slide cover title">
    <img class="hidden" src="graphics/bullet.png" alt=""/>
    <img class="hidden" src="graphics/fold.gif" alt=""/>
    <img class="hidden" src="graphics/unfold.gif" alt=""/>
    <img class="hidden" src="graphics/fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/unfold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt=""/>

    <h1>JavaScript: Design Patterns</h1>

    <div style="position: absolute; bottom: 20px;">
        <p>Alex.Kolonitsky@gmail.com</p>

        <p>
            <a href="http://javascript-learning-courses.googlecode.com">http://javascript-learning-courses.googlecode.com</a>
        </p>
    </div>
</div>

<div class="slide">
    <h1>Design Patterns</h1>

    <ul>
        <li>Singleton</li>
        <li>Factory</li>
        <li>Delegate</li>
        <li>Decorator</li>
        <li>Composite</li>
        <li>Flyweight</li>
    </ul>
</div>

<div class="slide">
    <h1>Singleton</h1>

    <pre class="brush: js">
        // Simple sample
        var mySingleton = {
            property1:"something",
            property2:"something else",
            method1:function(){
                console.log('hello world');
            }
        };
    </pre>
</div>

<div class="slide">
    <h1>Singleton</h1>


    <div style="font-size: 70%">
        <pre class="brush: js">
            // complex sample with private state
            var mySingleton = function(){

                // private members
                var privateVariable = 'something private';

                function showPrivate(){
                    alert(privateVariable);
                }

                // public members
                return {
                    publicVar:'the public can see this!'
                    publicMethod:function(){
                        showPrivate();
                    },
                };
            }();
        </pre>
    </div>
</div>

<div class="slide">
    <h1>Factory</h1>

    <div style="font-size: 80%">
        <pre class="brush: js">
            var Car = (function() {
                var Car = function (model, year, miles){
                    this.model = model;
                    this.year   = year;
                    this.miles = miles;
                };

                return function (model, year, miles) {
                    return new Car(model, year, miles);
                };
            })();

            var civic = new Car("Honda Civic", 2009, 20000);
            var mondeo = Car("Ford Mondeo", 2010, 5000);
        </pre>
    </div>
</div>

<div class="slide">
    <h1>Decorator</h1>

    <img src="graphics/OOP/pattern-decorator-uml.png" alt="" style="margin-top: 1em;">
</div>

<div class="slide">
    <h1>Decorator</h1>

    <img src="graphics/OOP/pattern-decorator-lepus.png" alt="" style="margin-top: 1em;">
</div>

<div class="slide">
    <h1>Decorator</h1>

    <div style="font-size: 50%">
        <pre class="brush: js">
            // ConcreteComponent (класс для последующего декорирования)
            function Coffee() {
                this.cost = function() { return 1; };
            }

            function Milk(coffee) { // Decorator A
                this.cost = function() { return coffee.cost() + 0.5; };
            }

            function Whip(coffee) { // Decorator B
                this.cost = function() { return coffee.cost() + 0.7; };
            }

            function Sprinkles(coffee) { // Decorator C
                this.cost = function() { return coffee.cost() + 0.2; };
            }

            var coffee = new Coffee();
            coffee = new Sprinkles(coffee);
            coffee = new Whip(coffee);
            coffee = new Milk(coffee);
            alert(coffee.cost());
        </pre>
    </div>
</div>


<div class="slide">
    <h1>Composite</h1>
</div>

<div class="slide">
    <h1>Flyweight</h1>

    <p>При проектировании приспособленца необходимо разделить его свойства на внешние и внутренние. Внутренние свойства всегда неизменны, тогда как внешние могут отличаться в зависимости от места и контекста применения и должны быть вынесены за пределы приспособленца.</p>
</div>

<div class="slide">
    <h1>Flyweight</h1>

    <img src="graphics/OOP/Flyweight.gif" alt="">
</div>

<div class="slide">
    <h1>Flyweight</h1>

    <img src="graphics/OOP/Flyweight-Lepus3.gif" alt="">
</div>

<div class="slide">
    <h1>Managing Extrinsic State</h1>

    <ul>
        <li>Use a manager object (which contains a centralized database of the extrinsic states)</li>
        <li>Composite</li>
    </ul>
</div>

<div class="slide">
    <h1>Example: Tooltip Objects</h1>

    
</div>


<div class="slide">
    <h1>Links</h1>

    <ul>
        <li></li>
    </ul>
</div>

<div class="slide">
    <h1>Вопросы / Предложения</h1>

    <ul>
        <li>Alex.Kolonitsky@gmail.com</li>
        <li>akolonitsky@exadel.com</li>
        <li>Skype: Desargues_</li>
        <li>http://code.google.com/p/javascript-learning-courses/issues/list</li>
    </ul>
</div>

</body>
</html>

